<template>
  <div>
    <HomeHeader />
    <van-tabs v-model="activeIndex" background="#e4e4e4" class="tabs" sticky>
      <van-tab
        v-for="category in cateList"
        :key="category.id"
        :title="category.name"
      >
        <!-- 分类内容, 这里当前激活分类就是被遍历出来的 category
      文章就在里面的category.post.List 里面
       -->
        <van-list
          v-model="category.loading"
          :finished="category.finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <PostItem
            :postData="post"
            v-for="post in category.postList"
            :key="post.id"
          ></PostItem>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeHeader from "../components/HomeHeader";
import PostItem from "../components/PostItem";
export default {
  data() {
    return {
      // 登录和没登录情况下首页默认激活不同栏目
      activeIndex: localStorage.getItem("token") ? 0 : 1,
      cateList: [],
    };
  },
  components: {
    HomeHeader,
    PostItem,
  },
  computed: {
    curCate() {
      return this.cateList[this.activeIndex];
    },
  },
  watch: {
    // 这里监听搭配分类切换,加载新分类数据，但是由于我们已经分栏目管理了
    // 所以如果发现新切换的栏目已经有文章,不需要重新获取
    // 只有文章不存在的时候才获取

    activeIndex() {
      // if (this.curCate.postList.length == 0) {
      //   this.loadPost();
      // }
      // 如果点击的是最后一个分类加号 那么不加载数据而是跳转页面
      if (this.activeIndex == this.cateList.length - 1) {
        console.log("123");
        this.$router.push("/manage");
      } else {
        if (this.curCate.postList.length == 0) {
          this.loadPost();
        }
      }
    },
  },
  created() {
    //判断当前本地储存有没有数据 有就拿回来
    if (localStorage.getItem("active")) {
      const categories = JSON.parse(localStorage.getItem("active"));
      // 因为原来所有的远程数据都放在一个 res.data.data 里面
      // 如果想无缝衔接之前的逻辑, 可以自己构造这么一个对象
      const res = {
        data: {
          data: categories,
        },
      };
      this.cateList = res.data.data.map((category) => {
        return {
          // 之前获取的栏目数据全部保留
          ...category,
          // 在此基础上 每个栏目都添加 postList:[]数组
          postList: [],
          // 继续添加数据 每个栏目要管理自己的页码和每页的长度
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      console.log(this.cateList);

      this.cateList.push({
        name: "+",
      });

      // 这里分类已经拿到 this.cateList
      //当前激活分类的索引默认是0
      // this.cateList[this.activeIndex] 可以拿到当前激活的分类对象
      this.loadPost();
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data.data);
        // 这里获取到分类数组, 里面每个数组都是分类对象
        // 后台响应字段不够用
        // 因为分类还需要存放当前分类的文章数组,在这里进行数据改造
        this.cateList = res.data.data.map((category) => {
          return {
            // 之前获取的栏目数据全部保留
            ...category,
            // 在此基础上 每个栏目都添加 postList:[]数组
            postList: [],
            // 继续添加数据 每个栏目要管理自己的页码和每页的长度
            pageIndex: 1,
            pageSize: 6,
            loading: false,
            finished: false,
          };
        });
        console.log(this.cateList);

        this.cateList.push({
          name: "+",
        });

        // 这里分类已经拿到 this.cateList
        //当前激活分类的索引默认是0
        // this.cateList[this.activeIndex] 可以拿到当前激活的分类对象
        this.loadPost();
      });
    }
  },
  methods: {
    onLoad() {
      // 拉到底触发加载更多函数
      // 将当前激活分页的页码 + 1
      this.curCate.pageIndex += 1;
      // 加载数据
      this.loadPost();
    },
    loadPost() {
      this.$axios({
        url: "/post",
        params: {
          category: this.curCate.id,
          // 带上pageSize 可以限定当前页面的长度 铺满屏幕即可
          //带上pageIndex 可以做翻页
          pageSize: this.curCate.pageSize,
          pageIndex: this.curCate.pageIndex,
        },
      }).then((res) => {
        console.log(res.data);
        // 这里拿到了当前激活分类的文章  之前已经改造过,每个分类都有自己的数组
        // 应该将文章数据放入到当前的激活分类 postList 当中
        this.curCate.postList = [...this.curCate.postList, ...res.data.data];
        // 拼接完数据,告诉组件我已经处理完数据了
        this.curCate.loading = false;

        // 如果所有数据已经获取完毕
        //需要将finished 改为true
        if (res.data.data.length < this.curCate.pageSize) {
          this.curCate.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab {
  font-size: 14/360 * 100vw;
}
/deep/.van-tab:nth-last-child(2) {
  background-color: #e4e4e4;
  position: sticky;
  top: 0;
  right: -8px;
  font-size: 20/360 * 100vw;
  width: 40/360 * 100vw;
  line-height: 44/360 * 100vw;
}
</style>
